<template>
    <div class="liuyanMian">
        <div class="liuyanTop">
            <div>
                <img class="liuyanImg" src="../assets/X2/liuYan/liuyanTit.png" alt="标题">

                <div class="tit">2022年诚赉健康活动规划会议</div>
                <div class="classDate">会议日期：<span>2022年12月1日</span></div>
            </div>
            <div>
                <!-- 签到墙 -->
                <div class="item" v-for="item in 80">
                    <img src="../assets/advisory_img1.png" alt="头像">
                    <div>张某某</div>
                </div>
            </div>
        </div>

        <!--留言墙  -->
        <div class="liuyanWall">
            <div class="wallTop">
                <img src="../assets/X2/nav/liuyan2.png" alt="留言">
                留言上墙
            </div>
            <div class="wallMain">
                <baberrage :List="barrageList"></baberrage>
            </div>
        </div>
    </div>
</template>



<script>

export default {
    name: 'liuYan',
    components: {
        baberrage: () => import('../components/baberrage.vue'),
    },
    data() {
        return {
            barrageList: [
                '霓为衣兮风为马，云之君兮纷纷而来下',
                '羡青山有思，白鹤忘机',
                '离离原上草，一岁一枯荣。野火烧不尽，春风吹又生',
            ]
        }
    },
    created() {
        console.log(this.barrageList);
        for (var i = 0; i < 100; i++) {
            this.barrageList.push(`第${i + 1}条留言`)
        }
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
.liuyanMian {
    box-sizing: border-box;
    padding: 20px 20px 0px 20px;
    width: 100%;

    .liuyanTop {
        display: flex;
        width: 100%;
        height: 420px;
        background: #FFFFFF;
        // border: 1px solid #666666;
        // border-radius: 10px;

        >div:first-child {
            box-sizing: border-box;
            padding-top: 44px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            width: 408px;
            height: 420px;
            background: #FFFFFF;
            border: 1px solid #666666;
            border-radius: 10px 0px 0px 10px;
            border-right: none;

            .liuyanImg {
                width: 106px;
                height: 60px;
            }

            .qiang {
                font-size: 36px;
                font-family: FZZongYi-M05S;
                font-weight: 400;
                color: #0B1532;
            }

            .eQiang {
                margin-top: 3px;
                font-size: 18px;
                font-family: FZZongYi-M05S;
                font-weight: 400;
                color: #0B1532;
            }

            .tit {
                margin-top: 90px;
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
            }

            .classDate {
                margin-top: 124px;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #999999;

                span {
                    color: #3E68FF;
                }
            }
        }

        >div:last-child {
            box-sizing: border-box;
            // padding: 40px 58px;
            padding: 40px 0px 40px 40px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            align-content: start;
            width: 1710px;
            height: 420px;
            overflow-y: scroll;
            background: #FFFFFF;
            border: 1px solid #666666;
            border-radius: 0px 10px 10px 0px;

            &::-webkit-scrollbar {
                display: none;
            }

            .item {
                margin-right: 74px;
                margin-bottom: 38px;
                width: 40px;
                height: 60px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                cursor: pointer;

                img {
                    margin-bottom: 6px;
                    width: 40px;
                    height: 40px;
                    background: #999999;
                    border-radius: 50%;
                }

                div {
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #0B1532;
                    width: 40px;
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }

    .liuyanWall {
        margin-top: 40px;

        .wallTop {
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;

            img {
                margin-top: -4px;
                margin-right: 8px;
                width: 20px;
                height: 20px;
            }
        }

        .wallMain {
            width: 100%;
            height: 300px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
            // background-color: #ccc;

            >div {
                width: 200px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;
            }

            .barrages-drop {
                position: relative;
                width: 100% !important;
                height: 100% !important;
                // background-color: #999999;

                .baberrage-stage {
                    position: relative;
                }

                .baberrage-item {
                    position: inherit;
                }
            }
        }
    }
}
</style>